<script setup lang="ts">
import { onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue';
import {onBeforeRouteLeave, useRoute, useRouter} from 'vue-router';
import { generateRandomCode } from '@/utils/utils';
import { useRouterPush } from '@/hooks/common/router';
import NoteSelImg from '@/assets/smart-eye/icon-note-sel.png';
import NoteImg from '@/assets/smart-eye/icon-note.png';
import AnalysisSelImg from '@/assets/smart-eye/icon-analysis-sel.png';
import AnalysisImg from '@/assets/smart-eye/icon-analysis.png';
import ModuleSelImg from '@/assets/smart-eye/icon-mould-sel.png';
import ModuleImg from '@/assets/smart-eye/icon-mould.png';
import OriginalNote from '@/views/smart-eye/detail/modules/original-note.vue';
import ResultAnalysis from '@/views/smart-eye/detail/modules/result-analysis.vue';
import ModuleFill from '@/views/smart-eye/detail/modules/module-fill.vue';
import { getAnalysisListAction } from '@/service/api';

const { routerBack, routerPushByKey } = useRouterPush();
const { query } = useRoute();

const router = useRouter();

const currentButtonIndex = ref<number>(0);

const headerButtons = ref<any[]>([
  {
    id: generateRandomCode(3),
    text: '原文注释',
    icon: NoteImg,
    iconActive: NoteSelImg
  },
  {
    id: generateRandomCode(3),
    text: '解析结果',
    icon: AnalysisImg,
    iconActive: AnalysisSelImg
  },
  {
    id: generateRandomCode(3),
    text: '模板填充',
    icon: ModuleImg,
    iconActive: ModuleSelImg
  }
]);
// 是否可以编辑类型：1.创建；2.编辑（查看）
const analysisType = ref<number>(Number(query.analysisType));
// 创建类型：1.创建；2.非创建
const createType = ref<number>(Number(query.createType));
const logId = ref<number>(Number(query.taskId));
const fileName = ref<string>(String(query.fileName));
const docFilePath = ref<string>(String(query.docFilePath));

onMounted(() => {
  // console.log('query: ', query);
  getLabelAction();
});

const labelList = ref<any[]>([]);

// 获取文档标签
async function getLabelAction() {
  const params: any = {
    logId: logId.value,
    pageNum: 1,
    pageSize: 99999
  };
  const { data, error } = await getAnalysisListAction(params);
  if (!error) {
    labelList.value = [];
    data &&
      data.list.forEach((item: any) => {
        if (item.labelBindings.length > 0) {
          labelList.value.push(item);
        }
      });
  }
}

// 顶部按钮点击事件
function headerButtonClick(index: number) {
  if (currentButtonIndex.value === index) return;
  currentButtonIndex.value = index;
}

const isBack = ref<boolean>(false);

// 返回首页
function backHomeClick() {
  if (createType.value === 1) {
    routerPushByKey('root');
  } else {
    routerBack();
  }
}

onBeforeRouteLeave((to, from, next) => {
  isBack.value = true;
  next();
});
</script>

<template>
  <div class="document-layout min-h-500px flex-col-stretch gap-16px lt-sm:overflow-auto">
    <div class="content-header">
      <NSpace>
        <NButton
          v-for="(item, index) in headerButtons"
          :key="item.id"
          class="head-btn"
          strong
          quaternary
          :style="{
            color: currentButtonIndex === index ? '#816CFE' : '#333333',
            borderBottom: currentButtonIndex === index ? '3px solid #816CFE' : ''
          }"
          @click="headerButtonClick(index)"
        >
          <template #icon>
            <img :src="currentButtonIndex === index ? item.iconActive : item.icon" width="20" alt="" />
          </template>
          {{ item.text }}
        </NButton>
      </NSpace>
      <NButton class="back-btn" quaternary @click="backHomeClick">
        <template #icon>
          <img src="@/assets/smart-eye/icon-back.png" width="20" alt="" />
        </template>
        返回
      </NButton>
    </div>
    <div v-if="isBack" class="container-box z-1100 h-full w-full bg-white"></div>
    <div v-else class="container-box flex-col">
      <OriginalNote
        v-show="currentButtonIndex === 0"
        :analysis-type="analysisType"
        :log-id="logId"
        :file-path="docFilePath"
        :file-name="fileName"
        :label-list="labelList"
        :is-back="isBack"
        @refresh="getLabelAction"
      />
      <ResultAnalysis v-show="currentButtonIndex === 1" :log-id="logId" :file-name="fileName" :label-list="labelList" />
      <ModuleFill
        v-if="currentButtonIndex === 2"
        :analysis-type="analysisType"
        :log-id="logId"
        :doc-file-path="docFilePath"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.bg-layout {
  padding: 16px 16px 0 !important;
  background: url('@/assets/imgs/edit-bg.png');
  background-size: 100% 100%;
}
.content-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  width: 100%;
  padding: 0 30px;
  .head-btn {
    width: 148px;
    height: 48px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    border: 1px solid #ffffff;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    line-height: 48px;
  }
  .back-btn {
    width: 120px;
    height: 48px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    border: 1px solid #faf9fd;
  }
}
.container-box {
  margin: 0 30px;
  padding: 20px 30px 40px;
  height: 911px;
  overflow: hidden;
  background: rgba(229, 231, 253, 0.6);
  border-radius: 12px 12px 0px 0px;
  border: 1px solid #faf9fd;
}
</style>
